<template>

    <div class="offcn19_main offcn19_main_color1">
        <div class="wrap clearfix">
            <!--            右栏            -->
            <detail-right :img-src="course.image"
                          :price="course.price"
                          :original-price="course.originalPrice"
                          :sale-count="course.saleCount"
                          :show-buy="!course.bought"
                          @buyCourse="buyCourse"
            ></detail-right>
            <!--            左栏-->
            <detail-left :course="course" :lesson-list="lessonList" @buyCourse="buyCourse"></detail-left>
        </div>

    </div>

</template>

<script>
    import DetailLeft from "../components/DetailLeft";
    import DetailRight from "../components/DetailRight";
    import {getCourseDetailAPI,buyCourseAPI,getLessonPlanAPI} from "../network/course";

    export default {
        name:'CourseDetail',
        data:function () {
            return {
                courseId:0,
                course:{},
                lessonList:[]
            }
        },
        created() {
            this.$emit('showCate',false)
            this.courseId = this.$route.params.id
            this.getCourseDetail()
            this.getLessonList()
            this.$store.dispatch('refreshUserInfo')
        },
        methods:{
            getCourseDetail(){
                //调用API查询课
                getCourseDetailAPI(this.courseId)
                    .then(res=>{
                        this.course=res
                    })
            },
            getLessonList(){
                //调用API查询课时安排
                console.log("调用API查询课时安排")
                console.log(this.courseId);

                getLessonPlanAPI(this.courseId)
                    .then(res=>{
                        console.log(res.lessons);
                        this.lessonList = res.lessons
                    })
            },
            buyCourse:function () {
                //是否登录
                if(!this.$store.getters.getUserLogin){
                    this.$router.push('/foreuser/login')
                }else {
                    //调用购买API
                    buyCourseAPI(this.courseId)
                        .then(res=>{
                            this.course.bought=true
                        })
                }
            }
        },
        components:{
            DetailRight,DetailLeft
        }

    }


</script>

<style>
    @import "../../public/19ke/v2/public/css/style_19new.css";
    .zg_uxEwm {
        position: absolute;
        width: 150px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        top: 40px;
        left: -40px;
        display: none;
    }

    .zg_uxEwm dt {
        float: left;
        width: 80px;
    }

    .zg_uxEwm dd {
        text-align: center;
        font-family: 'Microsoft Yahei';
        font-size: 14px;
        color: #666;
        padding-top: 15px;
    }

    .appXZ:hover .zg_uxEwm {
        display: block;
    }
    .offcn19_bmnum b {
        color: #f13232;
    }

    .Q-buy-btn {
        background: #65acff;
        margin-top: 8px
    }

    .Q-buy-btn:hover {
        background: #518acc;
    }
</style>
